<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8"/>
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
        <title>
            满意度考核打分结果
        </title>
        <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet prefetch"/>
        <link href="css/animate.min.css" rel="stylesheet prefetch"/>
        <link href="css/default.css" rel="stylesheet" type="text/css"/>
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,100,400,300,600,700,800" rel="stylesheet"/>
        <link href="css/styles.css?t=1201" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap-stars.css?t=1201" rel="stylesheet" type="text/css"/>
        <style type="text/css">
        	.thanks li{
        		
				margin:0.5em 0.8em;
				list-style: none;
        	}
        	[v-cloak] {
			  display: none;
			}
        </style>
    </head>
    <body>
        <div class="covering">
        	<header class="">
                <h1 class="h1-header animated bounceInLeft" style="position:relative;">
                   满意度考核结果
                </h1>
            </header>
            <div class="container-fluid table-class" v-cloak>
	            <div class="row">
	            	<div class="col-xs-12">
			            <table class="table">
			            	
			           		<thead>
			           			<tr>
			           				<th>#</th>
			           				<th>被考核人</th>
			           				<th>得分</th>
			           				<th>创建时间</th>
			           			</tr>
			           		</thead>
			           		<tbody>
			           			<tr v-for="(x,i) in answers" :key="i">
			           				<td>{{i+1}}</td>
			           				<td>{{x.workerName}}</td>
			           				<td>{{x.score}}</td>
			           				<td>{{x.createtime|date}}</td>
			           			</tr>
			           		</tbody>	
			            	
			            </table>
		            </div>
		        </div>
			</div>
			<div class="animated result hide">
				<ul style="text-align: left;">
					<li v-for="x in questions">
						<div class="title">{{x.title}}</div>
						<div class="rating">评分：{{x.rating}}，权重：{{x.weight}}，得分：{{x.rating*x.weight*10}}</div>
						<!-- <div class="comment">追加评价：{{x.comment}}</div> -->
					</li>
					<li>总分：{{total}}</li>
				</ul>
			    
			</div>
        </div>
    </body>
</html>

<script src="js/jquery-2.1.1.min.js">
</script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.barrating.js">
</script>
<script>
    $.ajaxSetup({
	  //如果服务端是用对象接收json
	  contentType : 'application/json'
	 });
	var vm=new Vue({
		el:'.covering',
		data:{
			
			workerCode:'',
			questions:[{
				title:'1. 系统运行情况',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'2. 用户需求及服务支撑完成情况',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'3. 工作主观能动性、责任心',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'4. 服务支撑响应速度、办事效率',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'5. 系统运行保障质量、故障解决能力及质量、升级或软件调整质量',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'6. 专业技术、业务系统的熟悉程度',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'7. 劳动考勤纪律、日常管理制度遵守情况',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'8. 用户表扬及投诉情况',
				rating:10,
				comment:'',
				weight:0.2
			},{
				title:'9. 遵守相关法规及保密规定',
				rating:10,
				comment:'',
				weight:0.1
			}],
			total:0,
			answers:[]
		},
		filters: {
			date:function(value) {
			  var d=new Date(value);
			  return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`;
			},
			datetime:function(value) {
			  var d=new Date(value);
			  return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`;
			}
		},
		mounted:function(){
			var _this=this;

			$.get("/answers").then(function(resp){
				console.log(resp)
				_this.answers=resp.items;
			})
		},
		methods:{
			onResultClick:function(){
				
				// var darken = '<div class="darken" style="display:none;"></div>';
		  //       $('body').prepend(darken);
		  //       $('.darken').delay().show(0).animate({ opacity: 0.8 }, 'fast');
		       $('.thanks').css('top','0').html($('.result').html())
		        // $('.result').removeClass('hide').addClass('fadeInDownBig');
			}
		}
	})

</script>
